// Timeline 时间线

.e-list-timeline {
    .e-list-timeline-group {
        margin: 0 0 2rem 0;
    }

    .e-list-timeline-heading {
        margin: 0 0 1.25rem 0;
        font-weight: 700;
        font-size: 1rem;
        text-transform: uppercase;
    }
    
    .e-list-timeline-items {
        position: relative;
        padding: 0;
        margin: 0;

        &:before {
            background-color: e-base-color(grey, 2);
            position: absolute;
            display: block;
            content: '';
            width: 1px;
            height: 100%;
            top: 0;
            bottom: 0;
            left: 3px;
        }

        .e-list-timeline-item {
            position: relative;
            display: table;
            table-layout: fixed;
            width: 100%;
            padding: .3rem 0;
            margin: .5rem 0;
            
            &:first-child,
            &:last-child {
                &:before {
                    background-color: #fff;
                    position: absolute;
                    display: block;
                    content: '';
                    width: 1px;
                    height: 50%;
                    top: 0;
                    bottom: 0;
                    left: 3px;
                }
            }
            
            &:last-child {
                &:before {
                    top: auto;
                    bottom: 0;
                }
            }

            .e-list-timeline-badge {
                text-align: left;
                vertical-align: middle;
                display: table-cell;
                position: relative;
                width: 20px;
                &:before {
                    background-color: e-base-color(grey, 2);
                    position: absolute;
                    display: block;
                    content: '';
                    width: 7px;
                    height: 7px;
                    left: 0;
                    top: 50%;
                    margin-top: -(7px / 2);
                    border-radius: 100%;
                }

                @each $name, $color in $e-state-colors {
                    &.e-list-timeline-badge-#{$name} {
                        &:before {
                            background-color: e-get($color, base);
                        }
                    }
                }
            }

            .e-list-timeline-icon {
                text-align: left;
                vertical-align: middle;
                display: table-cell;
                width: 30px;
                padding: 0 5px 0 0;
                line-height: 0;
                color: e-base-color(label, 2);
            }

            @include e-icons-size( (fontawesome: 1.2rem, lineawesome: 1.6rem, flaticon: 1.6rem));
            
            .e-list-timeline-text {
                display: table-cell;
                text-align: left;
                vertical-align: middle;
                width: 100%;
                padding: 0 0 0 5px;
                font-size: 1rem;
                color: e-base-color(label, 3);
                &:hover {
                    text-decoration: none;
                }
            }
            
            .e-list-timeline-time {
                display: table-cell;
                text-align: right;
                vertical-align: middle;
                width: 80px;
                padding: 0 0 0 5px;
                font-size: .9rem;
                color: e-base-color(label, 2);
            }
            
            &:first-child {
                padding-top: 0;
                margin-top: 0;
            }
            
            &:last-child {
                padding-bottom: 0;
                margin-bottom: 0;
            }

            &:first-child,
            &:last-child {
                &:before {
                    background-color: #fff;
                }
            }
            
            &.e-list-timeline-item--read {
                .e-list-timeline-badge,
                .e-list-timeline-icon,
                .e-list-timeline-text,
                .e-list-timeline-time {
                    opacity: .5;
                }
            }
        }
    }
}